<!--
- Author:   .
- Date:    2017/7/17 0017.
- File:    list.
-->
<template>
  <div class="Web_Box">
    <div class="combo_box"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div v-for="item in activeList.data" @click="gotoGoodsList(item.groupbuy_id)" class="mb20">
        <img :src="$config.website + $config.activityImgSrc + item.groupbuy_image">
        <p class=" bg_fff p20"><span class="wid slh">{{item.groupbuy_name}}</span> <span class="fr f12" style="line-height: 20px" v-show="item.type == 2 && item.upper_limit != 0">限购{{item.upper_limit}}件</span></p>
        <div class=" djshi f-cb" v-if="item.type == 1 && item.timeRemain && !(item.timeRemain.days < 0 || item.timeRemain.hours < 0 || item.timeRemain.minutes < 0 || item.timeRemain.seconds < 0)">
          <div class="daojishi">
            <span class="timem disib vm">{{item.timeRemain.days}}</span><span class=" disib vm">&nbsp;天&nbsp;</span>
            <span class="timem disib vm">{{item.timeRemain.hours}}</span><span class=" disib vm">&nbsp;时&nbsp;</span>
            <span class="timem disib vm">{{item.timeRemain.minutes}}</span><span class="disib vm">&nbsp;分&nbsp;</span>
            <span class="timem disib vm">{{item.timeRemain.seconds}}</span><span class="disib vm">&nbsp;秒&nbsp;</span>
            <span class="fr f12" v-show="item.upper_limit != 0">限购{{item.upper_limit}}件</span>
          </div>
        </div>
      </div>
      <loading-more :allLoaded="activeList.allLoaded" :show="activeList.data.length > 0"></loading-more>
      <empty-data :show="activeList.allLoaded && activeList.data.length <= 0"></empty-data>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        activeList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        countdownInterval: null
      }
    },
    components: {},
    created() {
      this.getActiveList(this.activeList.page, this.activeList.pageSize)
    },
    beforeDestroy() {
      clearInterval(this.countdownInterval)
    },
    methods: {
      gotoGoodsList(id) {
        this.$router.push({name: 'active-goods-list', params: {id: id}})
      },
      getActiveList(page, pageSize) {
        this.activeList.loading = true
        this.$request.getPanicBuyingList(page, pageSize).then(data => {
          if (data.length < this.activeList.pageSize) {
            this.activeList.allLoaded = true
          }
          this.activeList.data = [...this.activeList.data, ...data]
          clearInterval(this.countdownInterval)
          this.countdownInterval = setInterval(() => {
            for (let i = 0; i < this.activeList.data.length; i++) {
              let timeRemain = this.getTimeRemain(this.activeList.data[i].end_time)
              this.$set(this.activeList.data[i], 'timeRemain', timeRemain)
            }
          }, 1000)
        }).finally(() => {
          this.activeList.requested = true
          this.activeList.loading = false
        })
      },
      loadMore() {
        if (this.activeList.loading || this.activeList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getActiveList(this.type, ++this.activeList.page, this.activeList.pageSize)
        }, 500)
      },
      getTimeRemain(endTimeTamp) {
        if (endTimeTamp) {
          let currentTime = new Date()
          let endTime = new Date()
          endTime.setTime(endTimeTamp * 1000)
          return this.$utils.timeDif(currentTime, endTime)
        }
      }
    }
  }
</script>

<style>

</style>